<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="demo">
        <ph-button-group :container="true">
          <ph-button @click="open('success')" type="success">成功</ph-button>
          <ph-button @click="open('danger')" type="danger">错误</ph-button>
          <ph-button @click="open('info')" type="info">信息</ph-button>
          <ph-button @click="open('warning')" type="warning">警告</ph-button>
          <ph-button @click="open('plain')">default</ph-button>
          <ph-button @click="onClickable">clickable</ph-button>
          <ph-button @click="onAutoClose">自动关闭</ph-button>
        </ph-button-group>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
import { PhButton, PhButtonGroup, PhView, PhTabPanel, PhTab } from "@/index";
import { PhNotifyType } from "@/index";
export default defineComponent({
  components: {
    PhButton,
    PhButtonGroup,
    PhView,
    PhTabPanel,
    PhTab,
  },
  setup() {
    const ins = getCurrentInstance();
    const open = (type: PhNotifyType) => {
      ins?.proxy?.$phNotify(type, {
        type,
      });
    };
    const onClickable = () => {
      ins?.proxy
        ?.$phNotify("这是可以点击的通知", {
          clickable: true,
        })
        .click(() => {
          ins?.proxy?.$phToast("你点击了这个通知");
        })
        .close((a: any, b: any) => {
          console.log(a, b);
          if (a) ins?.proxy?.$phToast("通知关闭事件");
        });
    };
    const onAutoClose = () => {
      ins?.proxy?.$phNotify("这是个10s后自动关闭的通知", {
        autoClose: true,
      });
    };
    return {
      open,
      onClickable,
      onAutoClose,
    };
  },
});
</script>
